<template>
	<!-- 登录表单的容器 -->
	<div class="login_container">
		<!-- 登录区域 -->
		<div class="login_box">
			<!-- 表单 -->
			<div class="login_form">
				<el-form :model="loginForm" :rules="rules" ref="loginForm" label-width="75px" class="demo-ruleForm">
					<el-form-item label="用户名" prop="username">
						<el-input v-model="loginForm.username" prefix-icon="el-icon-s-custom"></el-input>
					</el-form-item>
					<el-form-item label="密码" prop="password">
						<el-input v-model="loginForm.password" prefix-icon="el-icon-unlock" type="password"
							:show-password="true"></el-input>
					</el-form-item>

					<el-form-item label="验证码" prop="verifyCode">
						<div class="verify_code_box">
							<el-input v-model="loginForm.verifyCode" prefix-icon="el-icon-mobile" class="verify-code">
							</el-input>
							<img src="../assets/yanzhenma.jpeg" alt="" class="verify-code-img" />
						</div>
					</el-form-item>

					<div class="login-btn">
						<el-form-item>
							<el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
							<el-button @click="resetForm('loginForm')">重置</el-button>
						</el-form-item>
					</div>
				</el-form>
			</div>
		</div>
	</div>
</template>
<script>
	import {
		login
	} from "../api/sys/SysUser";
	export default {
		name: "Login",
		data() {
			return {
				loginForm: {
					username: "",
					password: "",
				},
				rules: {
					username: [{
							required: true,
							message: "请输入用户名称",
							trigger: "blur"
						},
						{
							min: 3,
							max: 16,
							message: "长度在 3 到 16 个字符",
							trigger: "blur",
						},
					],
					password: [{
							required: true,
							message: "请输入用户密码",
							trigger: "blur"
						},
						{
							min: 3,
							max: 16,
							message: "长度在 3 到 16 个字符",
							trigger: "blur",
						},
					],
					verifyCode: [{
						required: true,
						message: "请输入用户验证码",
						trigger: "blur"
					}, ],
				},
			};
		},
		methods: {
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.$http.post(`/sys/login`, this.loginForm).then((response) => {
							let request = response.data;
							if (request.success) {
								window.sessionStorage.setItem("token", request.message);
								window.sessionStorage.setItem("username", request.data.user.userName);
								window.sessionStorage.setItem("id", request.data.user.id);
								this.$router.push('/home')
								this.$message({
									message: '登录成功',
									type: 'success'
								});
							} else {
								this.$message.error('登录失败,请重新登录');
							}
						}).catch((err) => {
							this.$message.error('登录失败,请重新登录');
						});

					} else {
						console.log("error submit!!");
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
		},
	};
</script>
<style lang="less" scoped>
	.login_container {
		height: 100%;
		background-color: aquamarine;
	}

	.login_box {
		width: 450px;
		height: 380px;
		background-color: #ffffffe2;
		border-radius: 3px;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.avatae_box {
		width: 130px;
		height: 130px;
		border: 1px solid #eeeeee;
		border-radius: 50%;
		padding: 10px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		margin: -65px auto;
		background-color: rgba(243, 255, 255, 0.921);
	}

	.login-img {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		background-color: #eeeeee;
	}

	.login_form {
		position: absolute;
		bottom: 0px;
		width: 100%;
		padding: 0px 20px;
		box-sizing: border-box;
	}

	.login-btn {
		display: flex;
		justify-content: flex-end;
	}

	.verify_code_box {
		display: flex;
	}

	.verify_code {
		width: 70%;
		justify-content: left;
	}

	.verify-code-img {
		width: 23%;
		height: 13%;
		justify-content: flex-end;
	}
</style>
